<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Array.from</title>
</head>

<body>

</body>

</html>
<script>
  // 现在有小编每个月老婆给的零花钱清单，但是因为某些原因，有些月份没有零花钱，如下数据所示
  // 一月，二月， 五月的零花钱
  // { 1: 200, 2: 140, 5: 400 }
  // 请将上面的数据格式转换为[200, 140, null, null, 400, null, null, null, null, null, null, null], 其中数组的长度为12，对应十二个月，请完善下面代码
  // const obj = { 1: 200, 2: 140, 5: 400 };
  // function translate(obj) {
  // 请在此处添加代码
  // }
  // 输出 [200, 140, null, null, 400, null, null, null, null, null, null, null]
  // console.log(translate(obj));

  // 答案一：
  const obj = { 1: 200, 2: 140, 5: 400 };
  function translate(obj) {
    return Array.from({ length: 12 }).map((_, index) => obj[index + 1] || null);
  }
  // 输出 [200, 140, null, null, 400, null, null, null, null, null, null, null]
  console.log(translate(obj));

  const obj = { 1: 200, 2: 140, 5: 400 };
  function translate(obj) {
    return Array.from({ length: 12 }, (v, i, thisArg) => {
      if (obj[i + 1]) {
        return obj[i + 1];
      } else {
        return null;
      }
    })
  }
  console.log(translate(obj));

  // 答案二：
  const obj = { 1: 200, 2: 140, 5: 400 };
  function translate(obj) {
    return Object.assign(Array(13).fill(null), obj).slice(1);
  }
  // 输出 [200, 140, null, null, 400, null, null, null, null, null, null, null]
  console.log(translate(obj));

  // 答案三：
  const obj = { 1: 200, 2: 140, 5: 400 };
  function translate(obj) {
    // 请在此处添加代码
    let result = Array(12).fill(null)
    Object.entries(obj).forEach(([key, value]) => {
      result[key - 1] = value;
    });

    return result;
  }
  // 输出 [200, 140, null, null, 400, null, null, null, null, null, null, null]
  console.log(translate(obj));




  /* 
   * Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
   * Array.from(arrayLike[, mapFn[, thisArg]])
   * 参数:
        arrayLike
        想要转换成数组的伪数组对象或可迭代对象。
        mapFn 可选
        如果指定了该参数，新数组中的每个元素会执行该回调函数。
        thisArg 可选
        可选参数，执行回调函数 mapFn 时 this 对象。
        返回值
        一个新的数组实例。
    
   */

  // 1、 从 String 生成数组
  Array.from('foo');
  // [ "f", "o", "o" ]

  // 2、从 Set 生成数组
  const set = new Set(['foo', 'bar', 'baz', 'foo']);
  Array.from(set);
  // [ "foo", "bar", "baz" ]

  // 3、从 Map 生成数组
  const map = new Map([[1, 2], [2, 4], [4, 8]]);
  Array.from(map);
  // [[1, 2], [2, 4], [4, 8]]

  const mapper = new Map([['1', 'a'], ['2', 'b']]);
  Array.from(mapper.values());
  // ['a', 'b'];

  Array.from(mapper.keys());
  // ['1', '2'];

  // 4、从类数组对象（arguments）生成数组
  function f() {
    return Array.from(arguments);
  }
  f(1, 2, 3);
  // [ 1, 2, 3 ]

  // 5、在 Array.from 中使用箭头函数
  Array.from([1, 2, 3], x => x + x);
  // [2, 4, 6]
  Array.from({ length: 5 }, (v, i) => i);
  // [0, 1, 2, 3, 4]

  // 6、序列生成器(指定范围)
  const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + (i * step));
  range(0, 4, 1);
  // [0, 1, 2, 3, 4] 
  range(1, 10, 2);
  // [1, 3, 5, 7, 9]
  range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
  // ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

  // 数组去重合并
  function combine() {
    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
    return Array.from(new Set(arr));
  }
  var m = [1, 2, 2], n = [2, 3, 3];
  console.log(combine(m, n));                     // [1, 2, 3]
















</script>